<template>
  <view class="content">
    <view class="buyCoupons">
      <view class="buyCoupons-image">
        <image :src="require('@/static/public/happyCoupon.png')" />
      </view>
      <view class="buyCoupons-card">
        <view
          class="card-select"
          @click="popupShow"
        >
          <view>
            <view class="card-select-title">
              请选择购买方式
            </view>
            <view
              class="card-select-subtitle"
              @click="popupShow"
            >
              {{ texts }}
            </view>
          </view>
          <image
            :src="require('@/static/public/arrow-right-black.png')"
            class="card-arrow-right"
            @click="popupShow"
          />
        </view>
        <view class="card-number">
          <view class="card-number-title">
            购买数量：
          </view>
          <uni-number-input
            v-model="number"
            :min="1"
            :max="2000"
            @change="changNumber"
          />
        </view>
      </view>
      <view class="footer">
        <view class="account">
          小计:￥{{ account }}
        </view>      
        <button
          class="confirm-btn"
          :disabled="btnLoading"
          :loading="btnLoading"
          @click="confirm"
        >
          确定
        </button>
      </view>
    </view>
    <popup
      v-model="popupValue"
      :closeable="false"
      mode="bottom"
      :top="24"
      :popup="false"
      length="auto"
      @close="close"
    >
      <view class="pop-warp">
        <view class="pop-image">
          <image
            :src="require('@/static/public/avatar.png')"
            class="card-arrow-right"
            @click="popupValue=true"
          />
        </view>
        <view class="pop-title">
          请选择购买方式
        </view>
        <view class="card-list">
          <radio-group
            @change="radioChange"
          >
            <view class="item">
              <label>
                <radio
                  :value="value1"
                  :checked="value1&&value===value1"
                  color="#fe7d15"
                  class="radio"
                  name="radio1"
                />
                <text>账户余额 （{{ balance }}可用）</text>
              </label>
            </view>
            <view class="item">
              <label>
                <radio
                  :value="value2"
                  :checked="value2&&value===value2"
                  color="#fe7d15"
                  class="radio"
                  name="radio1"
                />
                <text>现金购买</text>
              </label>
            </view>
          </radio-group>
        </view>
        <view
          class="select-btn"
          @click="select"
        >
          确定
        </view>
      </view>
    </popup>
  </view>
</template>

<script>
import popup  from '@/components/calendar/popup.vue'
import uniNumberInput from '@/components/uni-number-input/uni-number-input.vue';
import 'dingtalk-jsapi/entry/mobile';
import openLink from 'dingtalk-jsapi/api/biz/util/openLink';
export default {
    components:{
        popup,
        uniNumberInput
    },
    data(){
        return {
            popupValue:false,
            value:'',
            value1:'1',
            value2:'2',
            number:1,
            balance:0,
            texts:'请选择',
            account:50,
            btnLoading: false,
            outingCouponCashPayDto:{
              couponNumber:'',
              deviceType:''
            }
        }
    },
    watch:{
      number(n,o){
        console.log('n'+n);
        console.log('o'+o);
        this.account=this.number*50
        // this.$nextTick(() => {
				// 		this.number = n;
        //     console.log(this.number);
				// 	});
      }
    },
    onLoad(){
			this.getCorpinfo();
    },
    methods:{
      changNumber(e){
        console.log('e7777'+e);
        this.number=e
      },
      // 获取账户余额
      getCorpinfo() {
        this.$ajax({
          method: 'get',
          url: '/outing/mobile/corpinfo/queryCorpInfo'
        }).then(res => {
          if(res.data) {
            const { balance } = res.data
            this.balance = balance || 0;
          }
        });
      },
      radioChange(e){
        this.value=e.target.value
        if(this.value==='1'){
          this.texts=`账户余额（${this.balance}）可用`
          this.value1='1'

          console.log(this.value1);
        }else {
          this.texts='现金购买'
          this.value2='2'
          console.log(this.value2);

        }
      },
      close() {
        this.popupValue=false
      },
      select(){
        this.popupValue=false
      },
      popupShow(){
        this.popupValue=true
      },
      confirm(){
        console.log('number',this.number);
        if(!this.value){
          uni.showToast({
            title: '请选择购买方式'
          })
          return false;
        }
        if(this.number<=0){
          uni.showToast({
            title: '最小购买数量为1'
          })
          // this.number=1
          return false;
        }
        if(this.number>2000){
          uni.showToast({
            title: '最大购买数量为2000'
          })
          return false;
        }
        if(String(this.number).indexOf('.')>-1){
          uni.showToast({
            title: '数量只能为整数'
          })
          return false;
        }
        const systemInfo = dd.getSystemInfoSync();
        const { platform } = systemInfo
        const deviceType = platform === "Android" ? "android" : "ios"
					// this.btnLoading = true
          if(this.value&&this.value==='1'){
              this.$ajax({
                method: 'post',
                url: '/outing/mobile/exchange/add',
                data: {
                  number: this.number
                }
              }).then(res => {
                this.btnLoading = false
                console.log(res);
                  uni.showToast({
                    title: res.message
                  })
                  setTimeout(()=>{
                    uni.switchTab({
                      url: `/pages/personalCenter/index`
                    }) 
                  },1000)
              })
          }else {
            this.outingCouponCashPayDto.couponNumber=this.number
            this.outingCouponCashPayDto.deviceType=deviceType
              this.$ajax({
                method: 'post',
                url: '/outing/mobile/order/coupon/cashPay',
						    header: 'application/json',
                data: this.outingCouponCashPayDto
              }).then(res => {
                this.btnLoading = false
                console.log(res);
              if (res.code===8200) {
                if(deviceType==='ios'){
                    // ios端直接调用支付宝支付
                    // 支付宝支付
                    dd.pay({
                      info: res.data.body, // 订单信息
                      has_alipay: false, // 默认值false，true表示支付串中指定了支付账号，不需要走绑定支付宝流程
                      success: res => {
                        console.log('支付接口调用成功', res);
                        if (res.resultStatus === '9000') {
                          setTimeout(() => {
                            uni.switchTab({
                              url: `/pages/personalCenter/index`
                            })
                          }, 1000);
                        } else {
                          const code = res.resultStatus;
                          setTimeout(() => {
                            uni.switchTab({
                              url: `/pages/personalCenter/index`
                            })
                          }, 1000);
                          if (code === '4000') return uni.showToast({title: '订单支付失败！'});
                          if (code === '6001') return uni.showToast({title: '订单支付取消！'});
                          if (code === '6002') return uni.showToast({title: '网络链接出错！'});
                          return uni.showToast({title: '支付出现错误'});
                        }
                        /*{
                            memo: 'xxxx', // 保留参数，一般无内容
                            result: 'xxxx', // 本次操作返回的结果数据
                            resultStatus: '' // 本次操作的状态返回值，标识本次调用的结果
                        }*/
                      },
                      fail: err => {
                        console.log('支付失败', err);
                        uni.showToast({title: '支付失败'}, 2);
                        setTimeout(() => {
                        uni.switchTab({
                          url: `/pages/personalCenter/index`
                        })
                        }, 1000);
                      }
                    });
                }else {
                  console.log(res.data.url);
                // 安卓端跳转H5页面进行支付
                  openLink({
                      url: res.data.url
                  })
                }
					
              } else if(res.code !== 8200) {
                uni.showToast({
                  title: res.message
                })
              } else {
                console.log('未知错误', res)
              }
              })
          }
      }
    }
};
</script>

<style lang="less" scoped>
.content {
  min-height: 100vh;
	background:#f7f9fb;
}
.buyCoupons {
    .buyCoupons-image {
        width: 690rpx;
        height: 233rpx;
        margin: 0 30rpx 5rpx;
        image {
            width: 100%;
            height: 100%;
        }
    }
    .buyCoupons-card {
        background-color: #fff;
        .card-select {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 38rpx 30rpx;
            border-bottom: 1px solid #E8E8E8;
            .card-select-title {
                height: 29rpx;
                font-size: 30rpx;
                font-family: PingFang SC;
                font-weight: bold;
                color: #333333;
                line-height: 28rpx;
                margin-bottom: 27rpx;
            }
            .card-select-subtitle {
                height: 28rpx;
                font-size: 30rpx;
                font-family: PingFang SC;
                font-weight: 500;
                color: #666666;
                line-height: 28rpx;
                margin-left: 28rpx;
            }
            .card-arrow-right {
                width: 18rpx;
                height: 33rpx;
            }
        }
        .card-number {
          display: flex;
          justify-content: space-between;
          align-items: center;
            height: 142rpx;
            margin-left: 30rpx;
            margin-right: 29rpx;
            .card-number-title {
                height: 29rpx;
                font-size: 30rpx;
                font-family: PingFang SC;
                font-weight: bold;
                color: #333333;
                line-height: 28rpx;
            }
        }
    }
    .footer {
        position: fixed;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 120rpx;
        background-color: #fff;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 29rpx 15rpx;
        box-shadow: border-box;
       
         .confirm-btn {
            width: 182rpx;
            height: 77rpx;
            line-height: 77rpx;
            border: none;
            // border: 2rpx solid #FAE14D;
				    background: linear-gradient(90deg, #FFE955, #FFD302);
            margin-right: 29rpx;
            font-size: 30rpx;
            font-weight: bold;
            color: #333;
            text-align: center;
            border-radius: 38rpx;
            font-size: 30rpx;
            font-family: PingFang SC;
        }
        .account {
            height: 41rpx;
            font-size: 34rpx;
            font-family: PingFang SC;
            font-weight: bold;
            color: #FF4D00;
            line-height: 28rpx;
        }
    }
}
.pop-warp {
  height: 560rpx;
}
.pop-image {
    width: 107rpx;
    height: 107rpx;
    border-radius: 50%;
    position: absolute;
    left: 50%;
    top: -54rpx;
    transform: translateX(-50%);
    z-index: 999999;
    image {
      width: 100%;
      height: 100%;
    }
}
.pop-title {
height: 31rpx;
font-size: 32rpx;
font-family: PingFang SC;
font-weight: bold;
color: #333333;
line-height: 28rpx;
text-align: center;
margin-top: 74rpx;
margin-bottom: 56rpx;
}
.card-list {
  margin-left: 31rpx;
  .item {
    display: flex;
    align-items: center;
    text {
      margin-left: 24rpx;
      height: 29rpx;
      font-size: 30rpx;
      font-family: PingFang SC;
      font-weight: 500;
      color: #333333;
      line-height: 28rpx;
    }
    .radio {
      width: 44rpx;
      height: 44rpx;
    }
  }
  .item:nth-of-type(1){
    margin-bottom: 61rpx;
  }
}
.select-btn {
  width: 590rpx;
  height: 82rpx;
  background: #FAE14D;
  border-radius: 41rpx;
  font-size: 34rpx;
  font-family: PingFang SC;
  font-weight: bold;
  color: #333333;
  line-height:82rpx;
  margin: 80rpx auto 0;
  text-align: center;
  }
</style>
